<template>
  <div>
    <el-container>
      <el-header>垃圾入库审核</el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-switch v-model="showUnHandle" active-text="查看未处理" inactive-text="查看全部" @change="handleChange">
            </el-switch>
            <div v-show="showUnHandle">
              <!-- 入库审核信息表格 -->
              <el-table :data="reviews" style="width: 100%">
                <el-table-column prop="orderNum" label="订单号" width="180"></el-table-column>
                <el-table-column prop="staffId" label="送货员工id" width="180"></el-table-column>
                <el-table-column prop="staffName" label="送货员工名字" width="180"></el-table-column>
                <el-table-column label="操作" width="350">
                  <template #default="scope">
                    <!-- 更改入库审核状态按钮 -->
                    <el-button v-show="scope.row.state!=1" type="success" size="small" @click="confirm(scope.row)">更改入库审核状态</el-button>
                    <!-- 查看入库审核表细节 -->
                    <el-button type="danger" size="small" @click="showDetail(scope.row)">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-show="!showUnHandle">
              <el-table :data="reviews" style="width: 100%">
                <el-table-column prop="orderNum" label="订单号" width="180"></el-table-column>
                <el-table-column prop="staffId" label="送货员工id" width="180"></el-table-column>
                <el-table-column prop="staffName" label="送货员工名字" width="180"></el-table-column>
                <el-table-column prop="startTime" label="审查时间" width="180"></el-table-column>
                <el-table-column prop="accountId" label="审查人id" width="180"></el-table-column>
                <el-table-column prop="accountName" label="审查人姓名" width="180"></el-table-column>
                <el-table-column prop="state" label="状态" width="180" :formatter="formatState"></el-table-column>
                <el-table-column label="操作" width="350">
                  <template #default="scope">
                    <!-- 查看入库审核表细节 -->
                    <el-button type="danger" size="small" @click="showDetail(scope.row)">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>

      <!-- 查看入库审核详情-->
      <el-dialog v-loading="loading" title="入库申请表详情" :visible.sync="showDetailWindow" width="80%">
        <el-table :data="detailList" border>
          <el-table-column property="junkType" label="废品种类" width="100px"></el-table-column>
          <el-table-column property="number" label="数量"></el-table-column>
          <el-table-column property="unit" label="单位"></el-table-column>
          <el-table-column property="totalPrice" label="单类总价"></el-table-column>
        </el-table>
        <!-- 关闭对话框按钮 -->
        <el-button @click="showDetailWindow = false" type="danger" round>关闭</el-button>
      </el-dialog>
    </el-container>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum"
      :page-sizes="[3, 4, 5]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "StationBoss",
    data() {
      return {
        showUnHandle: true,
        showDetailWindow: false,
        loading: false,
        reviews: [],
        detailList: [],
        page: {
          pageNum: 1,
          pageSize: 5,
          total: 0
        },
        stationId: null
      };
    },
    mounted() {
      this.stationId = localStorage.getItem('stationId');
      this.loadAllReviews(this.page.pageNum, this.page.pageSize);
    },
    methods: {
      handleChange() {
        if (this.showUnHandle) {
          this.loadAllUnhandleReviews(this.page.pageNum, this.page.pageSize);
        } else {
          this.loadAllReviews(this.page.pageNum, this.page.pageSize);
        }
      },
      showDetail(row) {
        this.$http.get("/order/orderDetails/selectAllOrderDetailByOrderId/" + row.orderNum).then(resp => {
          if (resp.data.code === 200) {
            this.$message.success(resp.data.message);
            this.detailList = resp.data.data;
          } else {
            this.$message.error(resp.data.message);
          }
        });
        this.showDetailWindow = true;
      },
      confirm(row) {
        this.$http.get("/depot/review/confirmReview.api/"+row.id).then(resp => {
          if (resp.data.code === 200) {
            this.$message.success("垃圾入库审核通过成功!");
            this.loadAllReviews(this.page.pageNum, this.page.pageSize);
          } else {
            this.$message.error("审核失败: " + resp.data.message);
          }
        });
      },
      formatState(row) {
        switch (row.state) {
          case 0:
            return "待审查";
          case 1:
            return "已通过";
          default:
            return "未知";
        }
      },
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.loadAllReviews(this.page.pageNum, this.page.pageSize);
      },
      handleCurrentChange(pageNum) {
        this.page.pageNum = pageNum;
        this.loadAllReviews(this.page.pageNum, this.page.pageSize);
      },
      loadAllReviews(pageNum, pageSize) {
        this.$http.get("/depot/review/getPageById", {
          params: {
            id: this.stationId,
            pageNum: pageNum,
            pageSize: pageSize
          }
        }).then(response => {
          const result = response.data.data;
          this.page.pageNum = result.current;
          this.page.pageSize = result.size;
          this.page.total = result.total;
          this.reviews = result.records;
        });
      },
      loadAllUnhandleReviews(pageNum, pageSize) {
        this.$http.get("/depot/review/getUnHandelPageById", {
          params: {
            id: this.stationId,
            pageNum: pageNum,
            pageSize: pageSize
          }
        }).then(response => {
			if(response.data.code!=200){
			  this.$message.error(response.data.message)
			}
          const result = response.data.data;
          this.page.pageNum = result.current;
          this.page.pageSize = result.size;
          this.page.total = result.total;
          this.reviews = result.records;
        });
      }
    }
  };
</script>

<style scoped>

</style>
